<template>
  <h1 v-if="title?.length>0" class="title">{{ title }}</h1>
  <div class="goods-car-list">
    <div class="good-item" v-for="item in list" @click="toDetail(item.id)" >
      <div class="good-car">
        <img :src="item.imageUrl" alt="">
      </div>
      <div class="good-item-info">
        <h1 class="name">{{ item.name }}</h1>
        <h1 class="promo">{{ item.floralLanguage }}</h1>
        <div class="priceinfo">
          <span class="now">{{ `￥${item.price}` }}</span>
          <span class="pass">{{ `￥${item.marketPrice}` }}</span>
          <img class="shopcar" src="../assets/images/buybtn.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
defineProps(['list', 'title'])

const toDetail = (id: string) => {
  router.push({
    path: '/detail',
    query: {
      id
    }
  })
}


</script>

<style scoped lang="less">
.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0 0 0;
  line-height: 26px;
  color: #232628;
}

.goods-car-list {
  display: flex;
  border-radius: 8px;
  flex-wrap: wrap;
  justify-content: space-between;

  .good-item {
    width: 175px;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 0 0 8px 8px;

    .good-car {
      width: 175px;
      border-radius: 9px;

      img {
        width: 100%;
        border-radius: 8px 8px 0 0;
      }
    }

    .good-item-info {
      width: 175px;
      padding: 10px 15px;
      box-sizing: border-box;

      .name {
        font-weight: 600;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }


      .promo {
        padding-top: 10px;
        padding-bottom: 3px;
        font-size: 12px;
        color: #71797f;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

      }

      .priceinfo {
        display: flex;
        align-items: center;

        .now {
          font-size: 15px;
          font-weight: bold;
          color: #f3514f;
        }

        .pass {
          flex: 1;
          font-size: 10px;
          color: #71797f;
          text-decoration-line: line-through;
          margin-left: 6px;
          margin-top: 4rpx;
        }

        .shopcar {
          width: 24px;
          height: 24px;
          float: right;
        }
      }

    }
  }
}
</style>